import 'package:flutter/material.dart';

class Find extends StatefulWidget {
  Find({Key? key}) : super(key: key);

  @override
  _FindState createState() => _FindState();
}

class _FindState extends State<Find> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(55.0),
        child: AppBar(
          elevation: 0.0,
          backgroundColor: Color(0xFFFF502E),
          bottom: TabBar(
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 3,
            labelColor: Colors.white,
            indicatorColor: Colors.white,
            isScrollable: true,
            labelStyle: TextStyle(fontSize: 20.0),
            indicatorPadding: EdgeInsets.only(top: 20.0),
            tabs: <Widget>[
              Tab(text: "关注"),
              Tab(text: "推荐"),
              Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("附近"),
                    Padding(padding: EdgeInsets.only(left: 5.0)),
                    Image.asset(
                      'image/hb.png',
                      height: 18.0,
                    ),
                  ],
                ),
              ),
            ],
            controller: _tabController, 
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Container(
            child: Column(
              children: <Widget>[
                Card(
                  margin: EdgeInsets.only(top: 10.0),
                  child: Container(
                    margin: EdgeInsets.only(top: 10.0),
                    width: MediaQuery.of(context).size.width * 0.96,
                    decoration: new BoxDecoration(
                        // color: Colors.blue,
                        borderRadius: new BorderRadius.circular((10.0))),
                    // height: 48.0,
                    alignment: Alignment.center,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        ListTile(
                          leading: Image.asset(
                            'image/myA.png',
                            height: 25.0,
                          ),
                          title: const Text('简单'),
                          trailing: Text('01月6日 17:35'),
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                                alignment: Alignment.center,
                                margin: EdgeInsets.only(left: 5.0),
                                width: 26.0,
                                height: 16.0,
                                decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.circular(5.0)),
                                child: Center(
                                  child: Text(
                                    '视频',
                                    style: TextStyle(
                                        fontSize: 10.0, color: Colors.white),
                                  ),
                                )),
                            Padding(padding: EdgeInsets.only(left: 10.0)),
                            Text(
                              '社区团购到底有多暴力',
                              style: TextStyle(
                                fontSize: 13.0,
                              ),
                            ),
                          ],
                        ),
                        Container(
                            padding: EdgeInsets.only(bottom: 8.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Container(
                                  width:
                                      MediaQuery.of(context).size.width * 0.48,
                                  height:
                                      MediaQuery.of(context).size.height * 0.25,
                                  color: Colors.red,
                                  child: Image.network(
                                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fckimg.baidu.com%2Fresource%2Ffb426d1dc322974fd007728b9fb6373c.jpg&refer=http%3A%2F%2Fckimg.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627440193&t=99403f0c63d0e474e7c5d296d5245de7',
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                Container(
                                  height: MediaQuery.of(context).size.height *
                                      0.255,
                                  child: Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    children: <Widget>[
                                      Container(
                                        width:
                                            MediaQuery.of(context).size.width *
                                                0.45,
                                        height:
                                            MediaQuery.of(context).size.height *
                                                0.122,
                                        color: Colors.red,
                                        child: Image.network(
                                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017b2a5938c8bca8012193a37db72c.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627439942&t=4015e1b3f2df38d2d667dfb8f350a890',
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                      Container(
                                        width:
                                            MediaQuery.of(context).size.width *
                                                0.45,
                                        height:
                                            MediaQuery.of(context).size.height *
                                                0.122,
                                        color: Colors.red,
                                        child: Image.network(
                                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fa445c7e245ba801203d2239a3c9.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627439942&t=47f4be236005ece4978b20df978fe6f7',
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ))
                      ],
                    ),
                  ),
                )
                // Container(
                //   margin: EdgeInsets.only(top: 10.0),
                //   width: MediaQuery.of(context).size.width * 0.96,
                //   decoration: new BoxDecoration(
                //       color: Colors.blue,
                //       borderRadius: new BorderRadius.circular((10.0))),
                //   // height: 48.0,
                //   alignment: Alignment.center,
                //   child: Column(
                //     mainAxisAlignment: MainAxisAlignment.spaceAround,
                //     children: <Widget>[
                //       ListTile(
                //         leading: Image.asset(
                //           'image/myA.png',
                //           height: 25.0,
                //         ),
                //         title: const Text('简单'),
                //         trailing: Text('01月6日 17:35'),
                //       ),
                //       Container(
                //           padding: EdgeInsets.only(bottom: 8.0),
                //           child: Row(
                //             mainAxisAlignment: MainAxisAlignment.spaceAround,
                //             children: <Widget>[
                //               Container(
                //                 width: MediaQuery.of(context).size.width * 0.5,
                //                 height:
                //                     MediaQuery.of(context).size.height * 0.25,
                //                 color: Colors.red,
                //               ),
                //               Container(
                //                 height:
                //                     MediaQuery.of(context).size.height * 0.25,
                //                 child: Column(
                //                   mainAxisAlignment:
                //                       MainAxisAlignment.spaceAround,
                //                   children: <Widget>[
                //                     Container(
                //                       width: MediaQuery.of(context).size.width *
                //                           0.45,
                //                       height:
                //                           MediaQuery.of(context).size.height *
                //                               0.122,
                //                       color: Colors.red,
                //                     ),
                //                     Container(
                //                       width: MediaQuery.of(context).size.width *
                //                           0.45,
                //                       height:
                //                           MediaQuery.of(context).size.height *
                //                               0.122,
                //                       color: Colors.red,
                //                     ),
                //                   ],
                //                 ),
                //               )
                //             ],
                //           ))
                //     ],
                //   ),
                // ),
              ],
            ),
          ),
          Center(child: Text("这是推荐的内容")),
          Center(child: Text("这是附近的内容")),
        ],
      ),
    );
  }
}
